<template>
  <el-container direction="vertical" class="custom-form">
    <el-container>
      <el-container class="custom-form-canvas">
        <el-main>
          <el-form>
            <draggable
              :class="{ 'no-data-page': formData.length === 0 }"
              class="drop-container"
              tag="el-row"
              v-model="formData"
              group="components"
              :item-key="uuidv4"
              ghost-class="ghost"
            >
              <template #item="{ element }">
                <el-col
                  class="custom-form-canvas-item"
                  :class="{ 'choosed-item': choosedItemId === element.id }"
                  :span="element.span"
                >
                  <el-form-item :label="element.label" :label-width="element.labelWidth">
                    <component :is="element.type" v-model="element.value"></component>
                  </el-form-item>
                </el-col>
              </template>
            </draggable>
          </el-form>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>
<script lang="ts">
import { FormType, CustomFormItemConfig } from "@/component-interface";
import { defineComponent } from "vue";
import draggable from 'vuedraggable'
import { v4 as uuidv4 } from 'uuid';
import customFormApi from "@/api/custom-form.api";
import customFormSubmitApi from "@/api/custom-form-submit.api";
import { ElMessage } from "element-plus/es/components/message";
export default defineComponent({
  name: "CustomForm",
  components: { draggable },
  props: {
    formId: {
      type: String,
      default: ""
    },
    submitId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      formComponents: [{
        label: "输入框",
        labelWidth: "100px",
        type: FormType.ElInput,
        value: "",
        span: 12,
        tableName: "",
        field: ""
      },],
      formData: [] as CustomFormItemConfig[],
      choosedItemId: "",
    };
  },
  methods: {
    uuidv4: uuidv4,
    loadData() {
      customFormApi
        .findOne(this.formId)
        .then((res) => {
          const { code, content } = res.data;
          if (code === 0 && content.tableJson) {
            this.formData = content.tableJson
          }
        });
    },
    loadRecordData() {
      customFormSubmitApi
        .findOne(this.submitId)
        .then((res) => {
          const { code, content } = res.data;
          if (code === 0 && content.tableJson) {
            this.formData = content.tableJson
          }
        });
    },
    async formSave() {
      let inStorageData = {} as any;
      this.formData.forEach((data) => {
        if (!inStorageData[data.tableName]) {
          inStorageData[data.tableName] = {}
        }
        inStorageData[data.tableName][data.field] = data.value;
      })
      const result = await customFormSubmitApi
        .create({ tableJson: this.formData, inStorageData })
      return result;
    }
  },
  mounted() {
    if (this.formId) {
      this.loadData()
    } else {
      this.loadRecordData()
    }
  },
});
</script>

<style lang="scss" scoped>
.custom-form {
  padding: 20px;
  height: 100%;
  background: #f2f5f8;
  &-canvas {
    background: #fff;
    margin: 0 20px;
  }
  .custom-form-canvas {
    height: auto;
    padding: 28px 12px;
    background: #fff;
    &-item {
      position: relative;
      padding: 20px 12px;
      &-operation {
        position: absolute;
        right: 13px;
        top: 0px;
        color: #91a1b7;
        cursor: pointer;
      }
      ::v-deep .el-form-item {
        margin: 0;
      }
    }
    .choosed-item {
      background-color: #ebf8fb;
    }

    .drop-container {
      height: 100%;
      width: 100%;
    }

    .no-data-page {
      height: 200px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dashed #d9d9d9;
      color: #91a1b7;
      &::before {
        content: "从右侧拖拽组件";
      }
    }
    .ghost {
      width: 100%;
      font-size: 14px;
      background-color: #ebf8fb;
      padding: 12px;
      margin: 10px;
      color: var(--el-text-color-regular);
    }
  }
}
</style>
